<template>
    <div class="pages">
        <van-sticky>
            <div class="header">
                <div class="fls" @click="$router.back(-1)">
                    <img src="../../../static/images/icon-back.png" alt="">
                </div>
                <div class="centern">余额提现</div>
                <div class="fls"></div>
            </div>
        </van-sticky>
        <!-- 选择银行卡 -->
        <div class="bank_card" @click="Selectbankcard()">
            <div class="bank_left">
                <div class="bank_icon">
                    <!-- <img src="../../../static/images/icon-gsyh.png" alt=""> -->
                </div>
                <div class="bankinfo">
                    <div class="bank_xinxi">{{bank.cardNoMask}}</div>
                    <div class="bank_name">{{userinfoing.agency.agtMercNm}}</div>
                </div>
            </div>
            <div class="bank_righr">
                <img src="../../../static/images/icon-arrow-black.png" alt="">
            </div>
        </div>
        <!-- 提现金额 -->
        <div class="tixianmanny">
            <div class="headetitles">提现金额</div>
            <div class="unifistbtn">
                <div class="fl_may">
                    <div class="bigtit">¥</div>
                    <div class="input">
                        <input type="number" v-model="mannay" :placeholder="tertext">
                    </div>
                </div>
                <div class="fr_may" @click="arrerWithdrawal()">全部提现</div>
            </div>
        </div>
        <div class="v_huise">
            <div class="tishiicon">
                <img src="../../../static/images/icon-tips.png" alt="">
                <div class="wenzide">每笔提现金额不能少于1000元</div>
            </div>
            <div class="title_header">到账时间</div>
        </div>

        <!-- 上传文件 -->
        <div class="uploader">
            <div class="titlesd">上传发票信息</div>
            <van-uploader v-model="fileList" :after-read="afterRead">
                <template #preview-cover="{ file }">
                    <div class="preview-cover van-ellipsis">{{ file.name }}</div>
                </template>
            </van-uploader>
        </div>
        <!-- 单选 -->
        <div class="ridao">
            <div class="ridao_dan" @click="addzirenday()">
                <div class="zuo_index">
                    <div class="top_tit">下个自然日到账</div>
                    <!-- <div class="bont_tit">每笔按提现金额%收取手续费</div> -->
                    <div class="bont_tit">预计次日 09:00到账</div>
                </div>
                <div class="you_index">
                    <!-- 选中 -->
                    <img v-if="xuanzhong == 0" src="../../../static/images/icon-select.png" alt="">
                    <!-- 未选中 -->
                    <img v-if="xuanzhong == 1" src="../../../static/images/icon-select-nor.png" alt="">
                </div>
            </div>
            
            <div class="ridao_dan" @click="twodata()">
                <div class="zuo_index">
                    <div class="top_tit">2小时内到账</div>
                    <div class="bont_tit">每笔提现金额不能少于1000元</div>
                </div>
                <div class="you_index">
                    <!-- 选中 -->
                    <img v-if="zhongyuan == 0" src="../../../static/images/icon-select.png" alt="">
                    <!-- 未选中 -->
                    <img v-if="zhongyuan == 1" src="../../../static/images/icon-select-nor.png" alt="">
                </div>
            </div>

        </div>
        
        <div class="niceckead">
            <!-- <div class="isok">提现</div> -->
            <van-button type="primary"  color="#3288FF" @click="withdraw()"  block>提现</van-button>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import { Dialog } from 'vant';
import axios from 'axios';
import qs from 'qs';

import Vue from 'vue'
import api from '../../api/PublicInterface'
Vue.prototype.$api = api
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
    },
    data(){
        return{
            // 自然日到账
            xuanzhong:0,
            // 两小时后
            zhongyuan:1,
            bank:[],
            userinfoing:{
                agency:{}
            },//用户信息
            item:this.$route.params.item,
            id:'',
            Mywallet:'',//余额查询
            tertext:'',//  余额显示

            mannay:'',//输入的金额
            accountingCycle:'D1',//选择类型
            fileList:[],

            fileUrl:[],
        }
    },
    mounted(){
        this.userinfo();  //获取用户信息接口
        this.balance(); //余额查询
        console.log(this.item)
        setTimeout(()=>{
            if(this.item === '' || this.item === undefined){
                this.bankcards();  //查询银行卡信息
                return;
            }else{
                this.bank = this.item
            }
        },400)
    },
    methods:{
         afterRead(file) {
        // 此时可以自行将文件上传至服务器
          let params = new FormData();
          params.append("file", file.file);
          this.$api.assets(params).then((res)=>{
            //   console.log(res)
              this.fileUrl.push(res.payload)
              if(res.status != '0000'){
                  Toast(res.describe);
                  this.fileUrl = [];
                  this.fileList = []
              }
          })
        },
        // 提现
        withdraw(){
            if(this.mannay == ''){
                Toast('请输入提现金额');
                return;
            }
            if(this.mannay < 1000){
                Toast('每笔提现金额不能少于1000元');
                return;
            }
            if(this.fileUrl == ''){
                Toast('请上传发票信息');
                return;
            }
            console.log(this.fileUrl)
            const params = {
                amount:this.mannay,//提现金额
                cardId:this.bank.id,//提现银行卡ID
                accountingCycle:this.accountingCycle, // 到账周期. D0: 2小时内到账. D1: 下个自然日
                invoiceImages:this.fileUrl,//发票图片路径.调用图片上传接口得到
            }
            this.$api.applies(params).then((res)=>{
                console.log(res)
                if(res.status == '0000'){
                    Toast('提现成功');
                    setTimeout(()=>{
                        this.$router.back(-1);
                    },1000)
                }else{
                    Toast(res.describe);
                }
            })
        },


        // 点击全部提现
        arrerWithdrawal(){
            this.mannay = this.Mywallet
        },


        // 余额查询
        balance(){
            this.$api.balance().then((res)=>{
                if(res.status == '0000'){
                    if(res.payload != ''){
                        res.payload.forEach((item,index)=>{
                            if(item.type == 'NORMAL'){
                                this.Mywallet = item.balance;
                                this.tertext = '本次最多可提现'+item.balance
                            }
                        })
                    }
                }
            })
        },
        
        // 查询银行卡信息
        bankcards(){
            this.$api.bankcards().then((res)=>{
                console.log(res)
                if(res.status == '0000'){
                    if(res.payload != ''){
                      this.bank = res.payload[0];
                    //   console.log(this.bank)
                    }else{
                        Dialog.confirm({
                            title: '提示',
                            message: '当前没有绑定银行卡，请先绑定银行卡信息',
                        })
                        .then(() => {
                            // on confirm
                            this.$router.push({ name: "addBank" });
                        })
                        .catch(() => {
                            this.$router.back(-1)
                            // on cancel
                        });
                    }
                }else{}
            })
        },
        // 获取用户信息接口
        userinfo(){
            this.$api.userinfo().then((res) =>{
                // console.log(res)
                if(res.status == '0000'){
                    this.userinfoing = res.payload;
                    // this.phone = res.payload.phoneNo.substr(0, 3) + '****' + res.payload.phoneNo.substr(7)
                }else{
                    Toast(res.describe);
                }
            })
        },
        // 自然日到账
        addzirenday(){
            // 自然日到账
            this.xuanzhong = 0
            // 两小时后
            this.zhongyuan = 1
            if(this.xuanzhong == 0){
                this.accountingCycle = 'D1'
            }
        },
        // 两小时后
        twodata(){
            // 自然日到账
            this.xuanzhong = 1
            // 两小时后
            this.zhongyuan = 0
            if(this.zhongyuan == 0){
                this.accountingCycle = 'D0'
            }
        },
        // 选择银行卡
        Selectbankcard(){
            this.$router.push({ name: "Selectbankcard" });
        }
    }
}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
    .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header>.fls>img{
        width: 100%;
        height: 100%;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }

    .bank_card{
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #FFFFFF;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .bank_card>.bank_left{
        display: flex;
        align-items: flex-start;
        width: 84%;
    }
    .bank_icon{
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bank_icon>img{
        width: 100%;
        height: 100%;
    }
    .bankinfo{
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 16px;
        letter-spacing: 0px;
        margin-left: 16px;
    }
    .bank_name{
        margin-top: 4px;
    }

    .bank_card>.bank_righr{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bank_card>.bank_righr>img{
        width: 100%;
        height: 100%;
    }

    .tixianmanny{
        width: 100%;
        margin-top: 8px;
        background: #fff;
        padding: 16px;
        box-sizing: border-box;
    }
    .headetitles{
        color: #333333;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
    }
    .unifistbtn{
        width: 100%;
        height: 32px;
        margin-top: 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .fl_may{
        width: 66%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #828282;
    }
    .bigtit{
        color: #000000;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 30px;
        letter-spacing: 0px;
    }
    .input{
        width: 90%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .input>input{
        width: 100%;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
        border: 0;
    }

    .fr_may{
        width: 80px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        border: 1px solid #3288FF;
        color: #3288FF;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }

    .v_huise{
        width: 100%;
        padding: 8px 16px 16px 16px;
        box-sizing: border-box;
    }
    .tishiicon{
        width: 100%;
        display: flex;
        align-items: center;
    }
    .tishiicon>img{
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }
    .wenzide{
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 13px;
        letter-spacing: 0px;
    }
    .title_header{
        color: #333333;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
        margin-top: 24px;
    }
    .ridao{
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        background: #fff;
    }
    .ridao_dan{
        width: 100%;
        height: 73px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #F2F2F2;
    }
    .zuo_index{
        width: 88%;
    }
    .top_tit{
        width: 100%;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }
    .bont_tit{
        width: 100%;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }

    .you_index{
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .you_index>img{
        width: 100%;
        height: 100%;
    }
    .niceckead{
        width: 100%;
        margin-top: 40px;
        padding: 0 16px;
        margin-bottom: 40px;
        padding-bottom: 40px;
        box-sizing: border-box;
    }
    .isok{
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: #3288FF;
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
    }

    .uploader{
        width: 100%;
        background: #FFFFFF;
        padding: 16px 16px;
        box-sizing: border-box;
        margin-bottom: 10px;
    }

    .titlesd{
        width: 100%;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 17px;
        letter-spacing: 0px;
        margin-bottom: 16px;
    }

      .preview-cover {
        position: absolute;
        bottom: 0;
        box-sizing: border-box;
        width: 100%;
        padding: 4px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        background: rgba(0, 0, 0, 0.3);
    }
</style>